<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MPA Demo - 页面1</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input, button {
            padding: 8px;
            margin: 5px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        nav {
            margin-bottom: 20px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav>
        <a href="page1.html">页面1</a>
        <a href="page2.html">页面2</a>
    </nav>
    
    <div class="container">
        <h1>MPA Demo - 页面1</h1>
        <p>这是一个多页面应用(MPA)的示例。在MPA中，每个页面都是独立的HTML文档，数据不会自动在页面间共享。</p>
        
        <h2>数据绑定示例</h2>
        <p>在MPA中，我们需要手动实现数据绑定。这里使用原生JavaScript来同步输入框和显示区域：</p>
        
        <div>
            <label for="inputText">输入文本：</label>
            <input type="text" id="inputText" placeholder="在这里输入文本">
            <button id="updateBtn">更新显示</button>
        </div>
        
        <div style="margin-top: 15px;">
            <p>显示区域：<span id="displayText">尚未输入</span></p>
        </div>
        
        <div style="margin-top: 20px;">
            <h3>控制台验证说明：</h3>
            <p>1. 在输入框中输入文本</p>
            <p>2. 点击"更新显示"按钮</p>
            <p>3. 打开浏览器控制台，输入 <code>console.log(document.getElementById('inputText').value)</code> 查看输入值</p>
            <p>4. 在控制台中输入 <code>document.getElementById('inputText').value = '新值'</code> 来设置新值</p>
            <p>5. 再次点击"更新显示"按钮查看变化</p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const inputText = document.getElementById('inputText');
        const displayText = document.getElementById('displayText');
        const updateBtn = document.getElementById('updateBtn');
        
        // 手动实现数据绑定
        updateBtn.addEventListener('click', function() {
            displayText.textContent = inputText.value || '尚未输入';
            console.log('更新显示:', inputText.value);
        });
        
        // 在控制台暴露变量以便验证
        window.mpaData = {
            inputElement: inputText,
            displayElement: displayText,
            getValue: function() {
                return this.inputElement.value;
            },
            setValue: function(value) {
                this.inputElement.value = value;
                this.updateDisplay();
            },
            updateDisplay: function() {
                this.displayElement.textContent = this.inputElement.value || '尚未输入';
            }
        };
        
        console.log('MPA Demo 已加载。使用 window.mpaData 对象进行控制台验证。');
    </script>
</body>
</html>